<template>
  <div class="container">
    <div class="content">
      <div class="title">请填写用户信息</div>
      <div class="formBox">
        <el-form
          v-if="!type"
          ref="form"
          :model="form"
          label-width="130px"
          label-position="right"
          inline
          class="formSelf"
        >
          <el-form-item label="账户">
            <el-input v-model="form.userName" />
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="角色名称">
            <el-select v-model="form.roleId" placeholder="请选择角色">
              <el-option
                v-for="item in roleDownList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="部门">
            <treeselect
              v-model="form.departmentId"
              :options="menuOptions"
              :show-count="true"
              placeholder="请选择部门"
              :normalizer="normalizer"
              :default-expand-level="defaultLevel"
            />
          </el-form-item>

          <div class="dialogFooter">
            <el-form-item>
              <el-button type="primary" class="rightBtn" @click="onSubmit"
                >立即创建</el-button
              >
              <el-button class="leftBtn" @click="cancelUser">取消</el-button>
            </el-form-item>
          </div>
        </el-form>

        <el-form
          v-else
          ref="form"
          :model="form"
          label-width="120px"
          label-position="right"
          class="formSelf2"
        >
          <el-form-item label="用户姓名">
            <el-input v-model="form.name" :disabled="true" />
          </el-form-item>
          <el-form-item label="账户">
            <el-input v-model="form.userName" :disabled="true" />
          </el-form-item>
          <el-form-item label="原密码">
            <el-input
              v-model="form.oldPassword"
              placeholder="请输入您的原密码"
            />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              v-model="form.newPassword"
              placeholder="请输入您的新密码"
            />
          </el-form-item>
          <!-- <div style="marginleft: 80px">
            温馨提示：密码应该包含8-20位数字或字母 组成！
          </div> -->
          <div class="dialogFooter">
            <el-form-item>
              <el-button type="primary" class="rightBtn" @click="resetPsd"
                >确认</el-button
              >
              <el-button class="leftBtn" @click="cancelUser">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { departmentList } from "@/api/systemManagement";
import {
  userAdd,
  userUpdate,
  userDetail,
  updatePassword,
} from "@/api/systemManagement";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { handleTree } from "@/utils/transListToTreeData";
import { getRoleList } from "@/api/systemManagement";
export default {
  name: "UserDetail",
  components: { Treeselect },
  data() {
    return {
      form: {
        userName: "",
        name: "",
        phone: "",
        roleId: "",
        departmentId: null,
      },
      roleDownList: [],
      organizeList: [],
      menuOptions: [],
      accountType: "",
      defaultLevel: Infinity,
      id: "",
      type: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.GetOrganizeList();
    this.GetRoleList();
    if (this.id) {
      this.GetUserDetails();
    }
  },
  methods: {
    async GetOrganizeList() {
      const res = await departmentList();
      this.menuOptions = [];
      const menu = {
        id: 0,
        name: "美欣达印染园区安全管理平台",
        departmentVoList: [],
        parentId: -1,
      };
      menu.departmentVoList = handleTree(res.data, "id");
      this.menuOptions.push(menu);
    },
    normalizer(node) {
      if (node.departmentVoList && !node.departmentVoList.length) {
        delete node.departmentVoList;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.departmentVoList,
      };
    },
    async GetUserDetails() {
      const res = await userDetail({ id: this.id });
      this.form = res.data;
    },
    async GetRoleList() {
      const res = await getRoleList();
      this.roleDownList = res.data;
      this.loading = false;
    },

    async onSubmit() {
      if (
        this.form.userName === "" ||
        this.form.name === "" ||
        this.form.phone === "" ||
        this.form.roleId === "" ||
        this.form.departmentId === ""
      ) {
        this.$message.error("请填写信息");
        return;
      }
      if (this.id) {
        const data = {
          ...this.form,
        };
        const res = await userUpdate(data);
        this.handleSuccess(res);
      } else {
        const data = {
          id: this.id,
          ...this.form,
        };
        const res = await userAdd(data);
        this.handleSuccess(res);
      }
    },
    cancelUser() {
      this.$router.push("/accountManagement");
    },
    handleSuccess(res) {
      if (res.data) {
        this.$message.success(res.msg);
        this.$router.push("/accountManagement");
      } else {
        this.$message.error(res.msg);
      }
    },
    async resetPsd() {
      const obj = {
        userName: this.form.userName,
        oldPassword: this.form.oldPassword,
        password: this.form.newPassword,
      };

      const res = await updatePassword(obj);
      this.handleSuccess(res);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8fafc;
  padding: 10px;
  .content {
    background-color: #fff;

    .title {
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      color: #999;
      border-bottom: 1px solid #f8fafc;
    }
    .formBox {
      padding: 20px 180px;
      // text-align: center;
      .formSelf {
        margin-left: 20px;
      }
      .formSelf2 {
        padding: 0 300px;
      }
      .topBox {
        padding-left: 20px;
        text-align: center;
        .uploadTitle {
          margin: 10px 0;
          font-size: 14px;
          color: #606266;
          font-weight: 700;
        }
      }
      .el-form-item {
        margin-right: 60px;
      }

      .el-select {
        width: 100%;
      }
      .formItem {
        display: flex;
        justify-content: space-between;
      }
      ::v-deep .el-form--inline .el-form-item__content {
        width: 420px;
      }

      ::v-deep.el-upload--picture-card {
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
      }
      ::v-deep.el-upload-list--picture-card .el-upload-list__item-actions {
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
      }
      ::v-deep.el-upload-list--picture-card .el-upload-list__item {
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
      }
    }
  }
  .dialogFooter {
    display: flex;
    justify-content: right;

    margin-top: 10px;
    .leftBtn {
      border: 1px solid #249451;
      color: #249451;
    }
    .rightBtn {
      background-color: #249451;
      color: #fff;
      border: none;
    }
  }
}
</style>
